
<template>
    <HeaderCom/> 
    <el-card class="class_card" :body-style="{ padding: '0px' }">
        <div class="div-top">
            <span class="div-top-span">文章归档</span>
        </div>
        <div class="div-bottom">
            <div class="div-type">
                <el-icon style="vertical-align: middle">
                    <Files />
                </el-icon>
                <span style="vertical-align: middle"> 时间轴（月） </span>
            </div>
            <div class="div-blog-list">
                <el-timeline>
                    <template v-for="(item, index) in bloglist" :key="index">
                        <el-timeline-item :timestamp="item.yearMonth" placement="top" size="large" class="timeline-item">
                            <div class="blog_title" v-for="(post, key) in item.blogs" :key="key" @click="Article(post.blog_id)">
                                <span class="post-title">{{ formatDate(post.create_time) }}:&nbsp; {{ post.blog_title
                                }}</span>
                            </div>
                        </el-timeline-item>
                    </template>
                </el-timeline>
            </div>

        </div>

    </el-card>
</template>
  
<script lang="ts" setup>
import HeaderCom from "../components/HeaderCom.vue"
import { ref, onMounted } from 'vue'
import { YearMonthArchive } from '@/http'
import { Files } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const bloglist = ref()

onMounted(async () => {
    bloglist.value = (await YearMonthArchive()).data.result

})
// 格式化日期，只显示月日
function formatDate(dateString: number) {
    const dateObj = new Date(dateString);
    const month = (dateObj.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，需要加1；用padStart方法填充前导0
    const day = dateObj.getDate().toString().padStart(2, '0');
    return `${month}-${day}`;
}
function Article(id: number) {
  const { href }= router.resolve({ path: `/articleDetails/${id}` });
  window.open(href, "_blank")

}
</script>
<style scoped lang="scss">
.class_card {
    margin: 0 auto;
    width: 60%;
    border-radius: 8px;
    margin-top: 20px;
}

.div-top {
    height: 40px;
    border-bottom: 1px solid rgb(235, 238, 245);

    .div-top-span {
        color: rgb(64, 184, 255);
        font-size: 14px;
        line-height: 40px;
        margin-left: 15px;
    }
}

.div-bottom {
    padding: 20px;

    .div-type {
        height: 30px;
        border-bottom: 1px solid rgb(235, 238, 245);
        color: rgb(48, 49, 51);
        font-size: 14px;
        line-height: 20px;
    }

    .div-blog-list {
        padding: 20px 0 0 0;

    }
    .blog_title {
        margin: 20px 0 0 10px;
        height: 15px;
    }


    .post-title {
        color: #303133;
        font-size: 12px;
        display: flex;
        cursor: pointer;
    }
}
</style>
  